<template>
  <div
    class="edit-div"
    :contenteditable="canEdit"
    @focus="isLocked = true"
    @blur="isLocked = false"
    @input="changeText"
    v-html="innerText"
  />
</template>
<script type="text/ecmascript-6">
export default {
  name: 'EditDiv',
  props: {
    value: {
      type: String,
      default: ''
    },
    canEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      innerText: this.value,
      isLocked: false
    };
  },
  watch: {
    'value'() {
      if (!this.isLocked && !this.innerText) {
        this.innerText = this.value;
      }
    }
  },
  methods: {
    changeText() {
      this.$emit('input', this.$el.innerHTML);
    }
  }
};
</script>
<style lang="less" >
    .edit-div {
        width: 100%;
        height: 100%;
        overflow: hidden;
        word-break: break-all;
        outline: none;
        user-select: text;
        white-space: pre-wrap;
        text-align: left;
        height: 20px;
        line-height: 20px;
        margin-top: 12px;
        // cursor: text;
        &[contenteditable=true]{
            -webkit-user-modify: read-write-plaintext-only;
            &:empty:before {
                content: attr(placeholder);
                display: block;
                color: #ccc;
            }
        }
    }
</style>
